import React, { useState } from 'react'

import { Layout, Avatar, Menu, Dropdown } from 'antd'
import {
  DashboardOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  TableOutlined,
  CompassOutlined,
  UserOutlined,
  DownOutlined,
  ProfileOutlined,
  SettingOutlined
} from '@ant-design/icons'
import './index.less'
import { useNavigate } from 'react-router-dom'

import { useAppSelector } from '/@/hooks'

const { Header, Sider, Content } = Layout
const { SubMenu } = Menu

interface ClickEvent {
  key: string
  keyPath: string[]
}

const Main: React.FC<React.PropsWithChildren<{}>> = (props) => {
  const { children } = props
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate()

  const user = useAppSelector((state) => state.accout)

  // 展开关闭
  const toggle = () => {
    setCollapsed(!collapsed)
  }

  // 菜单点击
  const menuClick = (evt: ClickEvent) => {
    navigate(evt.key)
    localStorage.setItem('active', evt.key)
  }

  const userClick = (evt: ClickEvent) => {
    if (evt.key === 'modify') {
      navigate('/profile')
    } else {
      // 退出登录
      localStorage.setItem('active', '')
      localStorage.removeItem('state')
      navigate('/login')
    }
  }

  const active = localStorage.getItem('active')

  return (
    <Layout style={{ minWidth: 1024 }}>
      <Sider trigger={null} collapsible collapsed={collapsed} style={{ height: '100vh' }}>
        <div className="main logo">{collapsed ? 'RA' : '管理后台'}</div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[active || '/home']}
          onClick={menuClick}
        >
          <Menu.Item key="/home" icon={<DashboardOutlined />}>
            工作台
          </Menu.Item>
          <SubMenu key="/projects" icon={<TableOutlined />} title="项目管理">
            <Menu.Item key="/projects/add">新建项目</Menu.Item>
          </SubMenu>
          <Menu.Item key="/order" icon={<ProfileOutlined />}>
            客户管理
          </Menu.Item>
          <Menu.Item key="/counter" icon={<CompassOutlined />}>
            其他菜单
          </Menu.Item>
          <Menu.Item key="/user" icon={<SettingOutlined />}>
            修改密码
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="main site-layout">
        <Header className="site-layout-background" style={{ padding: 0, position: 'relative' }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: toggle
          })}
          <div className="main site-layout profile">
            <div className="profile-wrapper">
              <Avatar
                size={48}
                style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
                icon={<UserOutlined />}
              />
              {user.username}
              <Dropdown
                overlay={
                  <Menu onClick={userClick}>
                    <Menu.Item key="logout">退出登录</Menu.Item>
                  </Menu>
                }
              >
                <DownOutlined />
              </Dropdown>
            </div>
          </div>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            position: 'relative',
            margin: '24px 16px',
            padding: 24,
            overflowY: 'scroll',
            height: '100%'
            // minHeight: 840
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  )
}

export default Main
